<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		//JSON格式的user对象
		var user={"ID":1,"name":"张三","pass":"000"};
		$("#showUser").append(
							"ID:"+user.ID+"<br/>"+
							"姓名:"+user.name+"<br/>"+
							"密码"+user.pass
		);
		
		
		//下拉列表显示json对象数组数据
		var json=["中","美","俄"];
		var $json = $(json);
		var $sel = $("#arraySel"); // 展示数据的select元素
		$json.each(function(i) {
		   $sel.append("<option value='"+(i+1)+"'>"+this+"</option>");
	    });
		//li显示
		var $sel = $("#arraySel1"); 
		$json.each(function(i) {
			   $sel.append("<li>"+this+"</li>");
		    });
		
		
		
		//JSON格式的user对象数组
		var table1=[{"ID":2,"name":"admin","pwd":"123"},
			{"ID":3,"name":"詹姆斯","pwd":"1111"},
			{"ID":4,"name":"梅西","pwd":"456"},
			];
		var $table = $("<table border='1'></table>").append(
		"<tr><td>ID</td><td>姓名</td><td>密码</td></tr>");
		$(table1).each(function() {
			$table.append("<tr><td>" + this.ID + "</td><td>"
         		+ this.name + "</td><td>"
         		+ this.pwd + "</td></tr>");
		});
		$("#showTable").append($table);
		
		
		
		//JSON格式的user对象数组，表现为表格和下拉列表模式
		var userInfo=[{"id":1,"name":"admin","address":"北京市海淀区","phone":"123102225"},
			{"id":2,"name":"詹姆斯","address":"湖北省武汉市","phone":"0455415535"},
			{"id":3,"name":"梅西","address":"四川省成都市","phone":"64158515856"},
			{"id":4,"name":"赛龙","address":"湖南省永州市","phone":"94895454225"}];
		//表格模式显示
		var $table = $("<table border='1'></table>").append(
		"<tr><td>ID</td><td>姓名</td><td>地址</td><td>电话</td></tr>");
		$(userInfo).each(function() {
			$table.append("<tr><td>" + this.id + "</td><td>"
         		+ this.name + "</td><td>"
         		+ this.address + "</td><td>"
         		+this.phone+"</td></tr>");
		});
		$("#showInfo").append($table);
		//下拉列表模式显示
		var $json = $(userInfo);
		var $sel = $("#showUserInfo"); // 展示数据的select元素
		$json.each(function(i) {
		   $sel.append("<option value='"+(i+1)+"'>"+this.id+"-"+this.name+"-"+this.address+"-"+this.phone+"</option>");
	    });
	});
</script>
</head>
<body>
	=============一、JSON格式的user对象=============<br/>
	<div id="showUser"></div><br/>
	=============二、JSON格式的字符串数组=============
	<select id="arraySel"></select><br/>
	<ul id="arraySel1"></ul>
	=============三、JSON格式的user对象数组=============<br/>
	<div id="showTable"></div><br/>
	=============四、JSON格式的user对象数组，表格模式=============<br/>
	<div id="showInfo"></div><br/>
	=============五、JSON格式的user对象数组，下拉列表模式=============<br/>
	<select id="showUserInfo"></select><br/>
</body>
</html>